<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#di1{
				width: 800px;
				height: 840px;
				background-color:lightgreen;
				margin: auto;
				position: relative;
				}
			
			#d2{
					width: 780px;
					height: 780px;
					background-color: #7FFFD4;
					margin: 10px;
					position: absolute;
					
			
				
				}
			#d3{
				width: 760px;
				height: 760px;
				background-color:lightgreen;
				background-image: url(./img/backgroundimg.jpg) ;
				background-size: 760px 760px;
				margin: 10px;
				position: absolute;
				
	
			
				}
			#h1{
				color: #90EE90;
				background-image: url(img/a.jpg);
				background-size:800px 100px;
				padding-left:370px;
				margin-bottom: 0px;
				background-repeat: no-repeat;
			}

		</style>
		2.新制作一个页面，要求：
		       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
		       2.2 分别实现 id,类，标签三种方式查找以上元素
	</head>


	<body>

	<div id="di1" class="cd1" name="dn1">
		<h1 id="h1" class="hc1" name="hn1">自然</h1>		
		<div id="d2" class="cd1">
			<div id="d3" class="cd1">
				<ul id='u1' class="ui1" name="un1" style="list-style: none;" >
					<li>小鸟<p id="p1" class="pc1" name="pn1" ><img id="i1" class="ic1" name="in1" height="80px" width="200px" src="img/a.jpg" ></p></li>
					<li>小花<p><img height="80px" width="200px" src="img/b.jpg" ></p></li>
					<li>小草<p><img height="80px" width="200px" src="img/c.jpg" ></p></li>
					<li>小鱼<p><img height="80px" width="200px" src="img/d.jpg" ></p></li>
					<li>小鸭<p><img height="80px" width="200px" src="img/e.jpg" ></p></li>
				</ul>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript">
		//h
		console.log(document.getElementById('h1'))
		console.log(document.getElementsByClassName('hc1'))
		console.log(document.getElementsByTagName('h1')
		// div
		console.log(document.getElementById('di1'))
		console.log(document.getElementsByClassName('cd1'))
		console.log(document.getElementsByTagName('div'))
		//ul
		console.log(document.getElementById('u1'))
		console.log(document.getElementsByClassName('ui1'))
		console.log(document.getElementsByTagName('ul'))
		//<p>
		console.log(document.getElementById('p1'))
		console.log(document.getElementsByClassName('pc1'))
		console.log(document.getElementsByTagName('p'))
		//img
		console.log(document.getElementById('i1'))
		console.log(document.getElementsByClassName('ic1'))
		console.log(document.getElementsByTagName('i'))
	</script>
</html>
